<template>
  <div class="product-list-container">
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item>
          <el-input
            v-model="searchForm.keyword"
            placeholder="搜索商品名称"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            style="width: 160px"
            v-model="searchForm.brand"
            placeholder="品牌"
            clearable
          >
            <el-option
              v-for="item in brands"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            style="width: 160px"
            v-model="searchForm.role"
            placeholder="角色"
            clearable
          >
            <el-option
              v-for="item in roles"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            style="width: 160px"
            v-model="searchForm.usage"
            placeholder="用途"
            clearable
          >
            <el-option
              v-for="item in usages"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            style="width: 160px"
            v-model="searchForm.priceRange"
            placeholder="价格区间"
            clearable
          >
            <el-option
              v-for="item in priceRanges"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            style="width: 160px"
            v-model="searchForm.sort"
            placeholder="排序方式"
          >
            <el-option label="价格从低到高" value="priceAsc" />
            <el-option label="价格从高到低" value="priceDesc" />
            <el-option label="最新上架" value="newest" />
            <el-option label="销量优先" value="sales" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 商品列表 -->
    <div class="products-grid">
      <el-row :gutter="20">
        <el-col
          v-for="product in products"
          :key="product.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
        >
          <el-card
            class="product-card"
            :body-style="{ padding: '0px' }"
            @click="goToDetail(product.id)"
          >
            <div class="product-image-container">
              <img :src="product.image" class="product-image" />
              <div
                class="product-tags"
                v-if="product.tags && product.tags.length"
              >
                <el-tag
                  v-for="tag in product.tags"
                  :key="tag"
                  size="small"
                  :type="getTagType(tag)"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>
            <div class="product-info">
              <h3 class="product-title">{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="product-price-row">
                <span class="product-price"
                  >¥{{ product.price.toFixed(2) }}</span
                >
                <span class="product-sales">销量: {{ product.sales }}</span>
              </div>
              <div class="product-buttons">
                <el-button type="primary" size="small">立即购买</el-button>
                <el-button type="danger" size="small">加入购物车</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[12, 24, 36, 48]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();

// 搜索表单
const searchForm = reactive({
  keyword: "",
  brand: "",
  role: "",
  usage: "",
  priceRange: "",
  sort: "newest",
});

// 品牌选项
const brands = [
  { label: "Nike", value: "nike" },
  { label: "Adidas", value: "adidas" },
  { label: "Puma", value: "puma" },
  { label: "Under Armour", value: "ua" },
  { label: "New Balance", value: "nb" },
];

// 角色选项
const roles = [
  { label: "男士", value: "men" },
  { label: "女士", value: "women" },
  { label: "儿童", value: "kids" },
  { label: "中性", value: "unisex" },
];

// 用途选项
const usages = [
  { label: "跑步", value: "running" },
  { label: "篮球", value: "basketball" },
  { label: "足球", value: "football" },
  { label: "训练", value: "training" },
  { label: "休闲", value: "casual" },
];

// 价格区间选项
const priceRanges = [
  { label: "0-199元", value: "0-199" },
  { label: "200-499元", value: "200-499" },
  { label: "500-999元", value: "500-999" },
  { label: "1000-1999元", value: "1000-1999" },
  { label: "2000元以上", value: "2000+" },
];

// 分页相关
const currentPage = ref(1);
const pageSize = ref(12);
const total = ref(100);

// 商品列表数据
const products = ref([
  {
    id: 1,
    name: "示例商品1",
    description: "这是一个示例商品描述...",
    price: 199.99,
    image:
      "https://img2.baidu.com/it/u=1705766420,380501671&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
    sales: 100,
    tags: ["新品", "热销"],
  },
  // 添加更多商品...
]);

// 从路由参数中获取搜索关键词
onMounted(() => {
  const { keyword } = route.query;
  if (keyword) {
    searchForm.keyword = keyword;
    handleSearch();
  }
});

// 搜索处理
const handleSearch = () => {
  // TODO: 实现搜索逻辑
  console.log("搜索条件:", searchForm);
};

// 重置搜索
const resetSearch = () => {
  searchForm.keyword = "";
  searchForm.brand = "";
  searchForm.role = "";
  searchForm.usage = "";
  searchForm.priceRange = "";
  searchForm.sort = "newest";
  handleSearch();
};

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleSearch();
};

// 标签样式
const getTagType = (tag) => {
  switch (tag) {
    case "新品":
      return "success";
    case "热销":
      return "danger";
    default:
      return "";
  }
};

const goToDetail = (productId) => {
  router.push(`/product/${productId}`);
};
</script>

<style scoped>
.product-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.search-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.products-grid {
  margin-top: 20px;
}

.product-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.product-image-container {
  position: relative;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-tags {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 5px;
}

.product-info {
  padding: 15px;
}

.product-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 8px;
  color: #333;
}

.product-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.product-price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}

.product-sales {
  color: #999;
  font-size: 12px;
}

.product-buttons {
  display: flex;
  gap: 8px;
}

.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 优化搜索表单在小屏幕上的显示 */
@media screen and (max-width: 768px) {
  .search-form {
    flex-direction: column;
  }

  .search-form .el-form-item {
    margin-right: 0;
    width: 100%;
  }

  .el-select {
    width: 100%;
  }
}
</style> 